import React from 'react';
import ajax from 'superagent';

// import Snav from '../../components/snav/Snav';
import Nav from '../../components/nav/Nav';
import Cnav from '../../components/cnav/Cnav';
import Banner from '../../components/banner/Banner';

import Schedule from '../../components/schedule/Schedule';
import Comments from '../../components/comments/Comments';
import CommentsInput from '../../components/commentsInput/CommentsInput';
import TabTitle from '../../components/tabTitle/TabTitle';
import Sort from '../../components/sort/Sort';
import Video from '../../components/video/Video';


class Club extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'Club';
        //  clubScheduleMode 说明赛程是在未来赛程上（0），还是以往赛程上（1）
        // 由 TabTitle 改变，传送给 Schedule
        this.state = {
            name: "",
            clubScheduleMode: 0,
            banner: {
                imgSrc: "",
                info: "",
            },
            athleteDatas: [],
            schedule: {
                future:  [],
                history: [],
            },
        }
    }

    fetchingData( id ) {
        console.log( "fetchingData Club" );
        ajax.get(`api/teams/get/${id}/`)
            .end((error, response) => {
                if( !error && response ) {
                    let data = response.body;
                    console.log("_------------CLub fetchingData success" );
                    console.log(response.body);

                    // 将有关赛程的数据 转成 需要的格式
                    let setScheduleData = function( fiveDatas ) {
                        let temp = [] ;
                        fiveDatas.map(function( fiveData , index){
                            temp.push(
                                {
                                    id: fiveData.id,
                                    status: fiveData.status,
                                    team1: {
                                        imgSrc: fiveData.team_1_image,
                                        name: fiveData.team_1,
                                        score: fiveData.team_1_score
                                    },
                                    team2: {
                                        imgSrc: fiveData.team_2_image,
                                        name: fiveData.team_2,
                                        score: fiveData.team_2_score
                                    },
                                    location: fiveData.location,
                                    time: {
                                        date: fiveData.get_start_date,
                                        time: fiveData.get_start_time,
                                        timeGap: fiveData.get_how_long_day_before_start
                                    }
                                }
                            );
                        });

                        return temp;
                    }

                    // 正在进行的 和 未来赛程放在一个数组
                    let futureArr = setScheduleData(data.get_current_match).concat( setScheduleData(data.get_future_fivedays_matchs) );


                    // 将有关运动员的数据 转成 需要的格式
                    let setAthleteData = function(){
                        let temp = [];
                        data.get_players_score_rank.map(function( player, index ){
                            temp.push({
                                id: player.id,
                                rank: player.ranking,
                                img: player.images,
                                name: player.chinese_name,
                                score: player.total_goals
                            });
                        });

                        return temp;
                    };

                    // 将有关视频的数据 转成 需要的格式
                    let setVideoData = function(){
                        let temp = [];
                        data.get_videos.map(function( video, index){
                            temp.push({
                                title: video.video_name,
                                sub: video.description,
                                iframe: video.video_url_1,
                            });
                        });
                        return temp;
                    }

                    this.setState({
                        name: data.team_name,
                        banner: {
                            imgSrc: data.image,
                            info: data.team_name,
                        },
                        // 赛程传的数据
                        schedule: {
                            future:  futureArr,
                            history: setScheduleData(data.get_historics_matches),
                        },

                    // 运动员的列表
                        athleteDatas : setAthleteData(),
                        //  视频列表
                        videoDatas: setVideoData(),

                        // commentDatas: 评论的数据
                    });

                } else {
                    console.error(`Error fetching ${name} `, error);
             }
        });
    }

    componentWillMount() {
        console.log("Club will Mount");
        let id = "1";
        this.fetchingData( id );
    }

    onHandleChangeSchedule ( nextMode) {
        this.setState({
            clubScheduleMode: nextMode
        })
    }
    render() {
        return (
            <div>
                <Nav mode="snav" name={this.state.name} />
                <Banner mode="club" data={this.state.banner} />
                <section className="scroll">
                    <TabTitle mode="club" onHandleChangeSchedule = {this.onHandleChangeSchedule.bind(this)} />
                    <Schedule mode="club"  clubMode={this.state.clubScheduleMode} dataHistory= {this.state.schedule.history} dataFuture = {this.state.schedule.future} />
                </section>

                <section className="scroll">
                    <Sort mode="clubAthlete" data={this.state.athleteDatas} />
                </section>
                <section className="scroll" >
                    <Video mode="1" />
                </section>
                <section className="scroll">
                    <Comments />
                    <CommentsInput />
                </section>
            </div>
        );
    }
}

export default Club;
